<template>
  <div>
    <!-- 搜索区域 -->
    <el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="90px">
      <el-form-item label="商品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品类目" prop="category">
        <el-select v-model="queryParams.category" placeholder="请选择商品类目" clearable>
          <el-option
            v-for="item in categoryList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <!--      </el-form-item>-->
        <!--      <el-form-item label="商品仓库" prop="warehouseName">-->
        <!--        <el-input-->
        <!--          v-model="queryParams.warehouseName"-->
        <!--          placeholder="请输入商品仓库"-->
        <!--          clearable-->
        <!--          @keyup.enter.native="handleQuery"-->
        <!--        />-->
        <!--      </el-form-item>-->
        <!--      <el-form-item>-->
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
      <!-- 商品入库-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">入库</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格区域 -->
    <el-table :data="tableData" :pagination="pagination" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="商品编号" prop="erpProducts.productId"/>
      <el-table-column label="商品图片" prop="erpProducts.productImage">
        <template slot-scope="scope">
          <el-image :src="scope.row.erpProducts.productImage"
                    :preview-src-list="[scope.row.erpProducts.productImage]"/>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="erpProducts.productName"/>
      <el-table-column label="商品类目" prop="erpProducts.category"/>
      <el-table-column label="商品类型" prop="erpProducts.productType"/>
      <el-table-column label="商品属性" prop="erpProducts.productAttribute"/>
      <el-table-column label="仓库" prop="warehouseName"/>
      <el-table-column label="已入库" prop="inQuantity"/>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      :current-page.sync="pagination.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size.sync="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
    />
    <!--表单弹窗-->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="商品编号" prop="erpProducts.productId">
          <el-input v-model="form.erpProducts.productId" placeholder="请输入商品编号" clearable/>
        </el-form-item>
        <el-form-item label="商品名称" prop="erpProducts.productName">
          <el-input v-model="form.erpProducts.productName" placeholder="请输入商品名称" clearable/>
        </el-form-item>
        <el-form-item label="商品类目" prop="erpProducts.category">
          <el-select v-model="form.erpProducts.category" placeholder="请选择商品类目" clearable>
            <el-option
              v-for="item in categoryList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品属性" prop="erpProducts.productAttribute">
          <el-input v-model="form.erpProducts.productAttribute" placeholder="请输入商品属性" clearable/>
        </el-form-item>
        <el-form-item label="商品仓库" prop="warehouseName">
          <el-select v-model="form.warehouseName" placeholder="请选择商品仓库" clearable>
            <el-option
              v-for="item in warehouseList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
<!--        入库数量-->
        <el-form-item label="入库量" prop="inQuantity">
          <el-input v-model="form.inQuantity" placeholder="请输入入库数量" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listProductCategory} from "@/api/product/addProduct";
import {addInventory, getWarehouseList, listProductInventory} from "@/api/product/inventory";

export default {
  name: "inventory",
  data() {
    return {
      // 查询表单
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: '',
        category: '',
      },
      ids: [],
      rules: {
        // 商品名称
        productName: [
          {required: true, message: '请输入商品名称', trigger: 'blur'}
        ],
        // 商品类目
        category: [
          {required: true, message: '请输入商品类目', trigger: 'blur'}
        ],
        // 商品属性
        productAttribute: [
          {required: true, message: '请输入商品属性', trigger: 'blur'}
        ]
      },
      showSearch: true,
      // 商品类目
      categoryList: [],
      // 表格数据
      tableData: [],
      //分页
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      // 仓库列表
      warehouseList: [],
      // 弹出层标题
      title: '新增',
      // 是否显示弹出层
      open: false,
      // 表单数据
      form: {
        warehouseName: '',
        inQuantity: '',
        erpProducts: {
          productId: '',
          productName: '',
          category: '',
          productType: '',
          productAttribute: '',
          // productImage: ''
        }
      }
    }
  },
  created() {
    this.getProductCategory();
    this.getList();
    this.handleGetWarehouseList();
  },
  methods: {

    /**
     * 库存获取
     */
    getList() {
      listProductInventory(this.queryParams).then(res => {
        this.tableData = res.rows;
        this.pagination.total = res.total;
        console.log("库存列表", res.rows);
      }).catch(err => {
        this.$message.error(err.message);
      })
    },

    /**
     * 获取商品类目
     */
    getProductCategory() {
      listProductCategory().then(res => {
        this.categoryList = res.data;
        console.log("商品类目", res.data);
      }).catch(err => {
        this.$message.error(err.message);
      })
    },

    /**
     * 多选框选中数据
     */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.productId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /**
     * 搜索按钮操作
     */
    handleQuery() {
      this.getList();
      this.queryParams.pageNum = 1;
    },

    /**
     * 重置按钮操作
     */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /**
     * 新增按钮操作
     */
    handleAdd() {
      this.open = true;
      this.title = '新增';
      this.resetForm("form");
    },
    /**
     * 修改按钮操作
     */
    handleEdit() {
    },
    /**
     * 删除按钮操作
     */
    handleDelete() {
    },
    /**
     * 获取仓库列表
     */
    handleGetWarehouseList() {
      getWarehouseList().then(res => {
        this.warehouseList = res.data;
        console.log("仓库列表", res.data);
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    /**
     * 提交按钮操作
     */
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          addInventory(this.form).then(res => {
            this.open = false;
            this.getList();
            this.resetForm("form");
            this.$message.success('新增成功');
          }).catch(err => {
            this.$message.error(err.message);
          })
          this.$message.success('提交成功');
        } else {
          this.$message.error('请填写完整信息');
        }
      })
    },
    /**
     * 取消按钮操作
     */
    cancel() {
      this.open = false;
      this.resetForm("form");
    },

  }
}
</script>

<style scoped lang="scss">

</style>
